<#assign sysFields=["id","deleted","createTime","modifyTime","createById","modifyById"]>
<template>
    <div class="app-container">
        <div class="filter-container">
        <#list table.fields as index>
            <#if sysFields?seq_index_of(index.property) = -1>
                <el-input style="width: 200px;" class="filter-item" placeholder="${index.remark}" v-model="listQuery.${index.property}">
                </el-input>
            </#if>
        </#list>
        <#--<el-select clearable style="width: 90px" class="filter-item" v-model="listQuery.userStatus" :placeholder="$t('table.status')">-->
        <#--<el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key">-->
        <#--</el-option>-->
        <#--</el-select>-->
        <#--<el-select clearable class="filter-item" style="width: 130px" v-model="listQuery.userType" :placeholder="$t('table.type')">-->
        <#--<el-option v-for="item in  userTypeOptions" :key="item.key" :label="item.label" :value="item.key">-->
        <#--</el-option>-->
        <#--</el-select>-->
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">{{$t('table.add')}}</el-button>
        </div>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
                  style="width: 100%">
            <el-table-column align="center" :label="$t('table.id')" width="65">
                <template slot-scope="scope">
                    <span>{{scope.$index+1}}</span>
                </template>
            </el-table-column>
        <#list table.fields as index>
            <#if sysFields?seq_index_of(index.property) = -1>
                <el-table-column align="center" label="${index.remark}">
                    <template slot-scope="scope">
                        <span>{{scope.${index.property}}}</span>
                    </template>
                </el-table-column>
            </#if>
        </#list>
            <el-table-column align="center" :label="$t('table.actions')" width="360" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
                    <el-button type="info" size="mini" @click="handleInfo(scope.row,'info')">{{$t('table.info')}}</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row,'deleted')">{{$t('table.delete')}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @current-change="handleCurrentChange" :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px" style='width: 400px; margin-left:50px;'>
            <#list table.fields as index>
                <#if sysFields?seq_index_of(index.property) = -1>
                    <el-form-item label="${index.remark}" prop="${index.property}">
                        <el-input v-model="temp.${index.property}" ></el-input>
                    </el-form-item>
                </#if>
            </#list>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="dialogStatus !== 'info'">
                <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
                <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
                <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    <#assign path = table.pag?substring(table.pag?last_index_of(".")+1)>
    import {fetchList, info${table.className?cap_first}, create${table.className?cap_first}, delete${table.className?cap_first}, update${table.className?cap_first}} from '@/api/${path}/${table.className?uncap_first}'
    import waves from '@/directive/waves' // 水波纹指令
    import {parseTime} from '@/utils'

    export default {
        name: 'complexTable',
        directives: {
            waves
        },
        data() {
            return {
                tableKey: 0,
                list: null,
                total: null,
                listLoading: true,
                page: {
                    page: 1,
                    limit: 20,
                    sort: ''
                },
                listQuery: {
                    <#list table.fields as index>
                        <#if sysFields?seq_index_of(index.property) = -1>
                        ${index.property}: undefined<#if index_index!=table.fields?size>,</#if>
                        </#if>
                    </#list>
                },
                dialogFormVisible: false,
                dialogStatus: '',
                textMap: {
                    update: '修改',
                    create: '新增',
                    info: '详情'
                },
                temp: {
                    <#list table.fields as index>
                        <#if sysFields?seq_index_of(index.property) = -1>
                        ${index.property}: ''<#if index_index!=table.fields?size>,</#if>
                        </#if>
                    </#list>
                },
                rules: {
                    <#list table.fields as index>
                        <#if sysFields?seq_index_of(index.property) = -1>
                        ${index.property}: [{required: true, message: '${index.remark}不能为空', trigger: 'blur'}]<#if index_index!=table.fields?size>,</#if>
                        </#if>
                    </#list>
                },
                downloadLoading: false
            }
        },
        filters: {
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                fetchList(this.listQuery).then(response => {
                    this.list = response.content.list
                    this.total = response.content.total
                    this.listLoading = false
                })
            },
            // 搜索按钮
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            // 跳转页数
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            // 详情
            handleInfo(row, status) {
                info${table.className?cap_first}(row.id).then(response => {
                    if (response.success) {
                        this.temp = Object.assign({}, response.content) // copy obj
                        this.dialogStatus = status
                        this.dialogFormVisible = true
                        this.$nextTick(() => {
                            this.$refs['dataForm'].clearValidate()
                        })
                    }
                })
            },
            resetTemp() {
                this.temp = {
                    <#list table.fields as index>
                        <#if sysFields?seq_index_of(index.property) = -1>
                        ${index.property}: ''<#if index_index!=table.fields?size>,</#if>
                        </#if>
                    </#list>
                }
            },
            // 打开新增dialog
            handleCreate() {
                this.resetTemp()
                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                })
            },
            // 新增数据post
            createData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        create${table.className?cap_first}(this.temp).then(() => {
                            this.getList()
                            this.dialogFormVisible = false
                            this.$notify({
                                title: '成功',
                                message: '创建成功',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            // 更新页面
            handleUpdate(row) {
                info${table.className?cap_first}(row.id).then(response => {
                    this.temp = Object.assign({}, response.content) // copy obj
                    this.dialogStatus = 'update'
                    this.dialogFormVisible = true
                    this.$nextTick(() => {
                        this.$refs['dataForm'].clearValidate()
                    })
                })
            },
            // 提交更新
            updateData() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)
                        update${table.className?cap_first}(tempData).then(response => {
                            if (response.success) {
                                this.getList()
                                this.dialogFormVisible = false
                                this.$notify({
                                    title: '成功',
                                    message: '更新成功',
                                    type: 'success',
                                    duration: 2000
                                })
                            }
                        })
                    }
                })
            },
            // 删除操作
            handleDelete(row) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 调用删除接口
                    var p = {id: row.id}
                    delete${table.className?cap_first}(p).then(response => {
                        if (response.success) {
                            this.getList()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                    if (j === 'timestamp') {
                        return parseTime(v[j])
                    } else {
                        return v[j]
                    }
                }))
            }
        }
    }
</script>
